<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山大学刷题平台 - 编程竞赛</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-blue': '#045525',        // 校色主蓝
                        'sysu-lightBlue': '#E6EDF7',   // 浅蓝辅助色
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-yellow': '#FFD700',      // 竞赛主题色
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类与基础样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .btn-sysu {
                @apply bg-sysu-blue text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors;
            }
            .btn-sysu-outline {
                @apply border border-white bg-transparent text-white px-4 py-2 rounded-lg hover:bg-white/10 transition-colors;
            }
            .card-hover {
                @apply hover:shadow-md transition-shadow duration-300;
            }
            .contest-tag {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .countdown-item {
                @apply bg-white rounded-lg shadow-md w-16 h-16 flex flex-col items-center justify-center text-center;
            }
            .pagination-item {
                @apply relative inline-flex items-center px-2 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
            }
            .pagination-item.active {
                @apply bg-sysu-blue text-white border-sysu-blue;
            }
            .pagination-item.disabled {
                @apply text-gray-400 bg-gray-50 cursor-not-allowed;
            }
        }
    </style>
</head>
<body class="bg-gray-50 opacity-0" id="body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm transform translate-y-[-20px] opacity-0" id="header">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-blue text-white rounded-lg flex items-center justify-center mr-3">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-blue">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">题库</a>
                    <a href="/contests" class="text-sysu-blue font-medium border-b-2 border-sysu-blue py-5">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block">
                        <input type="text" placeholder="搜索竞赛"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm w-40 lg:w-56">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                    </div>

                    <!-- 用户区域容器 -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden p-2 text-gray-600 hover:text-sysu-blue" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端导航（默认隐藏） -->
        <div class="md:hidden hidden pb-4" id="mobile-menu">
            <div class="flex items-center relative mb-4 mx-2">
                <input type="text" placeholder="搜索竞赛"
                       class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm">
                <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
            </div>
            <nav class="flex flex-col space-y-2 mx-2">
                <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">首页</a>
                <a href="/questions" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">题库</a>
                <a href="/contests" class="text-sysu-blue px-2 py-2 bg-sysu-lightBlue rounded font-medium">竞赛</a>
                <a href="/ranking" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">排行榜</a>
                <a href="/resources" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">学习资源</a>
            </nav>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 页面标题与控制区 -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 opacity-0 transform translate-y-[20px]" id="page-title">
            <div>
                <h2 class="text-2xl font-bold text-gray-800">编程竞赛</h2>
                <p class="text-gray-500 mt-1">参与ACM/IOI双赛制竞赛，提升实战能力</p>
            </div>

            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:border-sysu-blue text-sm">
                        <option>全部竞赛</option>
                        <option>校级竞赛</option>
                        <option>省级竞赛</option>
                        <option>ACM赛制</option>
                        <option>IOI赛制</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 text-xs pointer-events-none"></i>
                </div>
                <button class="btn-sysu flex items-center text-sm transform transition-transform hover:scale-105">
                    <i class="fa fa-plus mr-2"></i> 创建竞赛
                </button>
            </div>
        </div>

        <!-- 进行中的竞赛 -->
        <section class="mb-10 opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">
            <h3 class="text-xl font-bold text-gray-800 mb-4">进行中的竞赛</h3>

            <!-- 重点竞赛卡片 -->
            <div class="bg-gradient-to-r from-sysu-blue to-sysu-blue/80 rounded-2xl p-6 md:p-8 text-white mb-8 shadow-lg transform transition-all duration-500 hover:shadow-xl">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="contest-tag bg-white/20 text-white">校级竞赛</span>
                            <span class="contest-tag bg-yellow-500 text-white">ACM赛制</span>
                        </div>
                        <h4 class="text-2xl font-bold mb-2">中山大学第12届程序设计竞赛</h4>
                        <p class="text-white/80 mb-4 max-w-2xl">面向全校学生的编程竞赛，涵盖算法设计、数据结构等多个知识点，展现你的编程实力。</p>

                        <div class="flex flex-wrap gap-6">
                            <div>
                                <p class="text-white/70 text-sm">开始时间</p>
                                <p>2023-06-10 09:00</p>
                            </div>
                            <div>
                                <p class="text-white/70 text-sm">结束时间</p>
                                <p>2023-06-10 15:00</p>
                            </div>
                            <div>
                                <p class="text-white/70 text-sm">参赛人数</p>
                                <p>248人</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col items-center">
                        <p class="text-white/80 mb-3">距离结束还有</p>
                        <div class="flex gap-2 mb-4">
                            <div class="countdown-item transform transition-transform hover:scale-105">
                                <span class="text-xl font-bold text-sysu-blue" id="hours">03</span>
                                <span class="text-xs text-gray-500">小时</span>
                            </div>
                            <div class="countdown-item transform transition-transform hover:scale-105">
                                <span class="text-xl font-bold text-sysu-blue" id="minutes">45</span>
                                <span class="text-xs text-gray-500">分钟</span>
                            </div>
                            <div class="countdown-item transform transition-transform hover:scale-105">
                                <span class="text-xl font-bold text-sysu-blue" id="seconds">22</span>
                                <span class="text-xs text-gray-500">秒</span>
                            </div>
                        </div>
                        <a href="#" class="btn-sysu-outline hover:bg-white/20 w-full text-center transform transition-transform hover:scale-105">
                            立即参与
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 即将开始的竞赛 -->
        <section class="mb-10 opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
            <h3 class="text-xl font-bold text-gray-800 mb-4">即将开始的竞赛</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 竞赛卡片1 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="250">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="contest-tag bg-blue-100 text-blue-600">省级竞赛</span>
                            <span class="contest-tag bg-purple-100 text-purple-600">IOI赛制</span>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">广东省大学生程序设计邀请赛</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">省级高水平编程竞赛，汇聚全省高校编程高手，共同竞技。</p>

                        <div class="border-t border-gray-100 pt-4 mt-auto">
                            <div class="flex justify-between text-sm mb-3">
                                <div class="flex items-center text-gray-500">
                                    <i class="fa fa-calendar-o mr-1"></i>
                                    <span>2023-06-25 09:00</span>
                                </div>
                                <div class="flex items-center text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    <span>5小时</span>
                                </div>
                            </div>
                            <button class="w-full py-2 border border-sysu-blue text-sysu-blue rounded-lg hover:bg-sysu-blue hover:text-white transition-colors text-sm transform transition-transform hover:scale-105">
                                预约提醒
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 竞赛卡片2 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="contest-tag bg-green-100 text-green-600">院系竞赛</span>
                            <span class="contest-tag bg-yellow-100 text-yellow-600">ACM赛制</span>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">计算机学院新生编程赛</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">面向计算机学院新生的入门级竞赛，帮助新生快速适应编程学习。</p>

                        <div class="border-t border-gray-100 pt-4 mt-auto">
                            <div class="flex justify-between text-sm mb-3">
                                <div class="flex items-center text-gray-500">
                                    <i class="fa fa-calendar-o mr-1"></i>
                                    <span>2023-07-08 14:00</span>
                                </div>
                                <div class="flex items-center text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    <span>3小时</span>
                                </div>
                            </div>
                            <button class="w-full py-2 border border-sysu-blue text-sysu-blue rounded-lg hover:bg-sysu-blue hover:text-white transition-colors text-sm transform transition-transform hover:scale-105">
                                预约提醒
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 竞赛卡片3 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="350">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="contest-tag bg-sysu-blue/10 text-sysu-blue">校级竞赛</span>
                            <span class="contest-tag bg-purple-100 text-purple-600">IOI赛制</span>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">中山大学算法优化挑战赛</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">专注于算法优化的竞赛，考验选手对算法的深入理解和优化能力。</p>

                        <div class="border-t border-gray-100 pt-4 mt-auto">
                            <div class="flex justify-between text-sm mb-3">
                                <div class="flex items-center text-gray-500">
                                    <i class="fa fa-calendar-o mr-1"></i>
                                    <span>2023-07-15 10:00</span>
                                </div>
                                <div class="flex items-center text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    <span>4小时</span>
                                </div>
                            </div>
                            <button class="w-full py-2 border border-sysu-blue text-sysu-blue rounded-lg hover:bg-sysu-blue hover:text-white transition-colors text-sm transform transition-transform hover:scale-105">
                                预约提醒
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 历史竞赛 -->
        <section class="opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
            <h3 class="text-xl font-bold text-gray-800 mb-4">历史竞赛</h3>

            <div class="overflow-hidden bg-white rounded-xl shadow-sm">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-sysu-gray">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">竞赛名称</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">赛制</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">举办时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参与人数</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- 历史竞赛1 -->
                        <tr class="opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="450">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">中山大学第11届程序设计竞赛</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="contest-tag bg-blue-100 text-blue-600">校级竞赛</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="contest-tag bg-yellow-100 text-yellow-600">ACM赛制</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-03-12
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                215
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="#" class="text-sysu-blue hover:text-sysu-blue/80 transition-colors">查看详情</a>
                            </td>
                        </tr>

                        <!-- 历史竞赛2 -->
                        <tr class="opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">数据结构专题挑战赛</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="contest-tag bg-green-100 text-green-600">院系竞赛</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="contest-tag bg-purple-100 text-purple-600">IOI赛制</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-01-08
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                156
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="#" class="text-sysu-blue hover:text-sysu-blue/80 transition-colors">查看详情</a>
                            </td>
                        </tr>

                        <!-- 历史竞赛3 -->
                        <tr class="opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="550">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">广东省高校编程联谊赛</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="contest-tag bg-blue-100 text-blue-600">省级竞赛</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="contest-tag bg-yellow-100 text-yellow-600">ACM赛制</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2022-12-10
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                320
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="#" class="text-sysu-blue hover:text-sysu-blue/80 transition-colors">查看详情</a>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- 分页 -->
                <div class="px-6 py-4 bg-white border-t border-gray-200 flex items-center justify-between opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="600">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <a href="#" class="pagination-item">上一页</a>
                        <a href="#" class="pagination-item ml-3">下一页</a>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示第 <span class="font-medium">1</span> 至 <span class="font-medium">3</span> 条，共 <span class="font-medium">12</span> 条结果
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                <a href="#" class="pagination-item disabled">上一页</a>
                                <a href="#" class="pagination-item active">1</a>
                                <a href="#" class="pagination-item">2</a>
                                <a href="#" class="pagination-item">3</a>
                                <span class="pagination-item">...</span>
                                <a href="#" class="pagination-item">4</a>
                                <a href="#" class="pagination-item">下一页</a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12 mt-16 opacity-0 transform translate-y-[20px]" id="footer">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-white text-sysu-blue rounded-lg flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-xl"></i>
                        </div>
                        <h2 class="text-lg font-bold">中山大学刷题平台</h2>
                    </div>
                    <p class="text-gray-400 text-sm mt-2">助力中大学子提升编程能力</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-envelope mr-1"></i> 联系我们
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                &copy; 2023 中山大学刷题平台. 所有权利保留.
            </div>
        </div>
    </footer>

    <script>
        // 添加自定义动画
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @keyframes slideInUp {
                    from { transform: translateY(20px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
                @keyframes slideInLeft {
                    from { transform: translateX(-20px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideInRight {
                    from { transform: translateX(20px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                .animate-fadeIn {
                    animation: fadeIn 0.5s ease-out forwards;
                }
                .animate-slideInUp {
                    animation: slideInUp 0.5s ease-out forwards;
                }
                .animate-slideInLeft {
                    animation: slideInLeft 0.5s ease-out forwards;
                }
                .animate-slideInRight {
                    animation: slideInRight 0.5s ease-out forwards;
                }
            </style>
        `);

        // 移动端菜单切换
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
            // 添加淡入动画
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('animate-fadeIn');
                setTimeout(() => {
                    mobileMenu.classList.remove('animate-fadeIn');
                }, 500);
            }
        });

        // 用户登录状态检查
        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
            initCountdown();
            initAnimations();
        });

        // 初始化页面动画
        function initAnimations() {
            // 页面主体淡入
            setTimeout(() => {
                document.getElementById('body').classList.add('animate-fadeIn');
            }, 100);

            // 头部导航栏滑入
            setTimeout(() => {
                document.getElementById('header').classList.add('animate-slideInUp');
            }, 200);

            // 页面标题区域滑入
            setTimeout(() => {
                document.getElementById('page-title').classList.add('animate-slideInUp');
            }, 400);

            // 为所有带有data-animation属性的元素添加动画
            const animatedElements = document.querySelectorAll('[data-animation="true"]');
            animatedElements.forEach(element => {
                const delay = element.getAttribute('data-delay') || 0;
                setTimeout(() => {
                    element.classList.add('animate-slideInUp');
                }, 600 + parseInt(delay));
            });

            // 页脚动画
            setTimeout(() => {
                document.getElementById('footer').classList.add('animate-slideInUp');
            }, 1500);
        }

        // 检查登录状态的函数
        async function checkLoginStatus() {
            const container = document.getElementById('user-area-container');
            const loadingIndicator = document.getElementById('loading-indicator');

            try {
                const token = localStorage.getItem('token');
                const response = await fetch('/api/check_login', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token
                    }
                });

                if (!response.ok) {
                    throw new Error('验证请求失败');
                }

                const data = await response.json();

                if (data.is_logged_in) {
                    renderLoggedInView(container, data || {});
                } else {
                    renderLoggedOutView(container);
                }
            } catch (error) {
                console.error('登录状态验证出错:', error);
                renderLoggedOutView(container);
            } finally {
                if (loadingIndicator) {
                    loadingIndicator.remove();
                }
            }
        }

        // 渲染已登录视图
        function renderLoggedInView(container, userData) {
            container.innerHTML = `
                <div class="relative" id="userDropdown">
                    <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                        <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                             alt="${userData.username || '用户头像'}"
                             class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                        <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 animate-fadeIn" id="dropdownMenu">
                        <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                        <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                        <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                    </div>
                </div>
            `;

            // 绑定下拉菜单事件
            bindDropdownEvents();
        }

        // 渲染未登录视图
        function renderLoggedOutView(container) {
            container.innerHTML = `
                <div class="flex items-center space-x-3">
                    <a href="/login" class="text-gray-600 hover:text-sysu-blue transition-colors px-3 py-2 rounded-md text-sm font-medium transform transition-transform hover:scale-105">
                        登录
                    </a>
                    <a href="/register" class="bg-sysu-blue text-white hover:bg-sysu-blue/90 transition-colors px-3 py-2 rounded-md text-sm font-medium transform transition-transform hover:scale-105">
                        注册
                    </a>
                </div>
            `;
        }

        // 绑定下拉菜单交互事件
        function bindDropdownEvents() {
            const dropdownTrigger = document.getElementById('dropdownTrigger');
            const dropdownMenu = document.getElementById('dropdownMenu');
            const dropdownIcon = document.getElementById('dropdownIcon');

            if (dropdownTrigger && dropdownMenu && dropdownIcon) {
                dropdownTrigger.addEventListener('click', function() {
                    dropdownMenu.classList.toggle('hidden');
                    dropdownIcon.classList.toggle('rotate-180');
                });

                // 点击外部关闭下拉菜单
                document.addEventListener('click', function(event) {
                    if (!dropdownTrigger.contains(event.target) && !dropdownMenu.contains(event.target)) {
                        dropdownMenu.classList.add('hidden');
                        dropdownIcon.classList.remove('rotate-180');
                    }
                });
            }
        }

        // 退出登录
        function logout() {
            try {
                const token = localStorage.getItem('token');
                fetch('/api/v1/logout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token
                    }
                }).then(() => {
                    localStorage.removeItem('token');
                    window.location.href = '/';
                });
            } catch (error) {
                console.error('退出登录出错:', error);
            }
        }

        // 倒计时功能
        function initCountdown() {
            // 模拟竞赛结束时间：当前时间 + 3小时45分钟
            const endTime = new Date();
            endTime.setHours(endTime.getHours() + 3);
            endTime.setMinutes(endTime.getMinutes() + 45);

            function updateCountdown() {
                const now = new Date();
                const diff = endTime - now;

                if (diff <= 0) {
                    document.getElementById('hours').textContent = '00';
                    document.getElementById('minutes').textContent = '00';
                    document.getElementById('seconds').textContent = '00';
                    return;
                }

                const hours = Math.floor(diff / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
                document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
                document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
            }

            // 初始更新一次
            updateCountdown();
            // 每秒更新一次
            setInterval(updateCountdown, 1000);
        }

        // 页面滚动时导航栏效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });
    </script>
</body>
</html>
